<template>
  <div class="home-container">
    <van-nav-bar class="app-nav-bar">
      <van-button 
          slot="title" 
          icon="search"
          round
          size="small"
          class="search-btn"
          to="/search">搜索</van-button>
    </van-nav-bar>
    <!-- 文章频道列表 -->
    <van-tabs v-model="active" class="channel-tabs">
      <van-tab 
            class="tab-item"
            :title="item.name" 
            v-for="item in channels" 
            :key="item.id">
        <article-list :channel="item">
          
        </article-list>      
      </van-tab>

      <div slot="nav-right" class="wap-nav-placeholder"></div>
      <div slot="nav-right" @click="isChannelEditShow=true" class="wap-nav-warp">
        <van-icon name="wap-nav"></van-icon>
      </div>
    </van-tabs>
    <!-- 文章内容列表 -->
    
    <!-- 弹出层 -->
    <van-popup 
            v-model="isChannelEditShow" 
            position="bottom" 
            class="channel-edit-popup"
            closeable
            close-icon-position="top-left"
            get-container="body"
        >
        <!-- 弹出层频道具体内容 -->
        <channel-edit :user-channels="channels"
                      :active="active" 
                      @close="isChannelEditShow = false"
                      @update-active="onUpdateActive">
        </channel-edit>
        </van-popup>
  </div>  
</template>

<script>
import {getChannels} from '@/api/user.js'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import {mapState} from 'vuex'
import {getItem} from '@/utils/storage'

export default {
  name:'HomeIndex',
  created() {
    this.loadChannels()
  },
  components:{
    ArticleList,
    ChannelEdit
  },
  computed:{
    ...mapState(['user'])
  },
  data() {
    return {
      active:0,
      channels:[],
      isChannelEditShow:false, //控制编辑频道是否显示

    }
  },
  methods: {
    async loadChannels(){
      let channels = []
      if(this.user){
        const {data} =await getChannels()
        channels = data.data.channels
      }else{
        const localChannels = getItem('user-channels')
        if (localChannels) {
          channels = localChannels
        }else{
          const {data} =await getChannels()
        channels = data.data.channels
        }
      }
    this.channels = channels
 

    },
    onUpdateActive(index){
      this.active = index
    }
  },
  
}
</script>

<style lang="less" scoped>
.app-nav-bar{
 /deep/.van-nav-bar__title{
    max-width: none;
  }
  .search-btn{
    width: 277px;
    height: 32px;
    background:#5babfb;
    border: none;
    .van-icon{
      font-size: 16px;
    }
    .van-button__text{
      font-size: 14px;
      color: #fff;
    }
  }
}
.channel-tabs{
  /deep/ .van-tab{
    // width: 70px;
    border-right: 1px solid #edeff3;
    border-bottom: 1px solid #edeff3;
  }
  /deep/ .van-tabs__line{
    width: 15px !important;
    height: 3px;
    background:#3296fa;
    bottom: 20px;
  }
  .wap-nav-warp{
    position: fixed;
    right: 0;
    width: 33px;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    opacity: .9;
    .van-icon{
      font-size: 24px;
    }
  }
}
.channel-edit-popup{
  height: 100%;
}
.wap-nav-placeholder{
  width: 33px;
  flex-shrink: 0;
}
</style>